/**
  * This polish.css file contains all
  * design information about this project.
  * It can be customized for specific devices
  * or device groups by putting it in the 
  * appropriate sub-folder or by using preprocessing.
  *
  * If you want to adjust a design for all
  * Nokia devices, define it in "resources/Nokia/polish.css"
  * and so on. Only new and different settings
  * need to be specified in such polish.css files, this means that
  * styles inherit all attributes of their "parent" style.
  *
  * For customizations of the base style, use 
  * resources/customization1/polish.css, for example.
  */

/**
  * the colors which are defined in
  * the colors section can later be referenced.
  * This makes changes easy, since the color
  * just needs to be changed in one position.
  * Even default colors (like blue, green, lime, etc)
  * can be changed here. 
  *
  * Tip: use names that describe their meaning, not names that describe the color:
  * Good name: backgroundColor
  * Bad name:  lightGreen
  * This allows you to change the design later onwards without ending up with
  * color definitions like "lightGreen: red;".
  */
  
 /*******************   UserForm   **************************/
 .stringBox {
	layout: left | expand;
	text-wrap: true;
	border-color: #0087fa;
	margin: 4px;
	padding: 4px;
	font-color:#000;
	min-height: 20%;
	background {
		color: #FFF;
	}
	label-style: textFieldLabel;
}

.stringField {
	layout: left | expand;
	text-wrap: false;
	border-color: #0087fa;
	margin: 4px;
	padding: 4px;
	font-color:#000;
	background {
		color: #FFF;
	}
	label-style: textFieldLabel;
}

.textBox {
	layout: left | expand;
	text-wrap: true;
	border-color: #8699a9;
	margin: 4px;
	padding: 4px;
	font-color:#000;
	min-height: 20%;
	background {
		color: #FFF;
	}
	label-style: textFieldLabel;
}

.textBox:hover{
	border-color: #0087fa;
	border-width: 2;
	background {
		color: #FFF;
	}
}

.textField {
	layout: left | expand;
	text-wrap: false;
	border-color: #8699a9;
	margin: 4px;
	padding: 4px;
	font-color:#000;
	background {
		color: #FFF;
	}
	label-style: textFieldLabel;
}

.textFieldLabel {
	margin-left: 4px;
	font-color: #000;
	layout: newline-after;
}

.userForm {
	background-color: screenBackgroundColor;
}
	
.textField:hover {
	border-color: #0087fa;
	border-width: 2;
	background {
		color: #FFF;
	}
}

.checkBoxLabel{
	padding-left: 4px;
	font-color: #000;
}

.checkBox {
	padding-left: 4px;
	width: 98%;
	label-style: checkBoxLabel;
	layout: left | expand;
}
.checkBoxItem {
	margin-left: 4px;
	padding-left: 4px;
	label-style: checkBoxLabel;
	layout: left | expand;
}
.checkBoxItem:hover{
	padding-left: 4px;
	font-color:#0087fa;
}
.checkBox:hover {
	padding-left: 4px;
	font-color:#0087fa;
}
.alertBox {
	font-color: #BC2A4D;
	repaint-previous-screen: true;
	layout: horizontal-center | vcenter | horizontal-shrink | vertical-shrink;
	title-style: alertBoxTitle;
	padding: 5;
	border {
		type: round-rect;
		color: #017ba9;
	}
	background {
		type: round-rect;
		color: screenBackgroundColor;
	}
}
.alertBoxTitle {
	layout: center;
	font-size:small;
	height: 0;
}
/***********************************************************************/

/************************** UserList *********************************/
.userList{
	
}

.userListItem{
	
}
.groupItem {
	icon-image: url(group_icon.png);
	padding: 4px;
	layout: left | expand;
}
.groupItem:hover{
	background {
		color: #00c8fa;
	}
	font-color: focusedFontColor;
}
.topicItem {
	icon-image: url(topic_icon.png);
	padding: 4px;
	layout: left | expand;
}
.topicItem:hover{
	background {
		color: #00c8fa;
	}
	font-color: focusedFontColor;
}
.requestItem {
	icon-image: url(join_request_icon.png);
	padding: 4px;
	layout: left | expand;
}
.requestItem:hover{
	background {
		color: #00c8fa;
	}
	font-color: focusedFontColor;
}
.userItem {
	icon-image: url(user_icon.png);
	padding: 4px;
	layout: left | expand;
}
.userItem:hover{
	background {
		color: #00c8fa;
	}
	font-color: focusedFontColor;
}
.leaderItem{
	icon-image: url(group_leader_icon.png);
	padding: 4px;
	layout: left | expand;
}
.leaderItem:hover{
	background {
		color: #00c8fa;
	}
	font-color: focusedFontColor;
}
.comment{
	padding-left: 4px;
	label-style: checkBoxLabel;
	layout: left | expand;
}
.comment:hover {
	padding-left: 4px;
}
.commentItem{
	icon-image: url(comment_icon.png);
	padding: 4px;
	layout: left | expand;
}
.commentItem:hover{
	background {
		color: #00c8fa;
	}
	font-color: focusedFontColor;
}

/**********************************************************************/

label {
	font-size: small;
	layout: newline-after;
}

screeninfo {
	margin-top: 2;
	margin-left: 5;
	margin-right: 5;
}

info {
	layout: right;
	/* margin-right: 10; */
	background-color: argb( 170, 255, 255, 255 );
}
colors {
	fontColor: #ccc;
	focusedFontColor: #000;
	bgColor:  #222;
	focusedBgColor:  #ee4;
	borderColor: fontColor;
	focusedBorderColor: focusedFontColor;
	screenBackgroundColor: #F0F5F8;
}


/** 
  * When you use the same background several times,
  * you can design it in the backgrounds section.
  * In this case only one instance of the background
  * is used, which reduces the memory footprint.
  */
  
backgrounds {
	/* sample:
	screenBackground {
		color: bgColor;
		image: url( bg.png );
		anchor: top | left;
		top: menu;
	}
	*/
}

/** 
  * When you use the same border several times,
  * you can design it in the borders section.
  * In this case only one instance of the border
  * is used, which reduces the memory footprint.
  */
borders {
	/*focusedBorder {
		type: round-rect;
		color: focusedBorderColor;
	}*/
	
}



/**
  * The title style is a predefined style which is used
  * for all screen-titles unless you specify a 'title-style' attribute within a screen style.
  */
title {
	padding: 2px;
	font-size: large;
	font-style: bold;
	font-color: #FFF;
	background-color: #00c8fa;
	border: none;
	layout: horizontal-center | horizontal-expand;
}

/*********************   MAIN MENU   ******************************************************************************************************/
.screenMainMenu {
	background-color: screenBackgroundColor;
	layout: horizontal-expand | horizontal-center | vertical-center;
	columns: 3;
}

.itemMainMenuEntry {
	/*margin-left: 5%;
	margin-right: 5%;*/
	/*width: 64px;*/
	padding: 5px;
	icon-image: url(glyphicons_%INDEX%.png);
	icon-image-align: top;
	font-color: fontColor;
	font-size: small;
	/*font-bitmap: tahoma-12.bmf;*/
	layout: expand | center;
}

.itemMainMenuEntry:hover {
	background {
		type: round-rect;
		color: #00c8fa;
		/*color-animation {
			on:focus;
			range: #FFF..#00c8fa;
			duration: 1s;
		}*/
	}
	font-color: focusedFontColor;	
}

/*********************   SCROLL BAR   ******************************************************************************************************/
/* You need to activate the scrollbar by setting the "polish.useScrollBar" variable to "true" in your build.xml script. */
scrollbar {
	scrollbar-slider-color: #333;
	scrollbar-slider-width: 3;
}

/*********************   MENU BAR     *******************************************************************************************************/
/* You need to activate the extended menubar that allows this finetuned design by setting the 
   "polish.MenuBar.useExtendedMenuBar" variable to "true" in your build.xml script. */

menubar
{
	padding-top: 3px;
	padding: 2px;
	background-color: #00c8fa;
}

menu {
	margin-left: 0;
	margin-right: 2px;
	padding: 2px;
	min-width:50%;
	background {
		type: round-rect;
		color: #F0F5F8;
		border-color: #008aff;
	}
}

/** Style for the first layer of subcommands: **/

menu1 extends menu {
	background-color:  #F0F5F8;
	background-type: round-rect;
      /*layout: right;*/
      margin-bottom: 4px;
      margin-right: 4px;
}


/**
  * The menuItem style is a predefined style
  * for the actual commands in a fullscreen-menu.
  * When the menuItem style is not defined,
  * the menu style will be used instead. 
  */
menuItem {
	margin-top: 2px;
	padding: 2px;
	padding-left: 5px;
	font {
		color: #000;
		style: bold;
	}
	layout: left;
	/**
	 * Yes, it's possible to use preprocessing within CSS files. Use any preprocessing
	 * variables like polish.midp2 or polish.api.nokia-ui. You can also access resource
	 * information using these property functions:
	 * - exists( resourcename ): checks whether a resource is defined for the current target device
	 * - imagewidth( imagename ): retrieves the width of the given image
	 * - imageheight( imagename ): retrieves the height of the given image
	 */
	//#if ${ exists( arrowRight.png ) }
		command-child-indicator: url(arrowRight.png);
	//#else
		command-child-indicator-color: blue;
		command-child-indicator-width: 8;
		command-child-indicator-height: 10;
	//#endif
}

.menuItem:hover {
	background-color: #b4e4ff;
	font-color: #000;
	layout: left | horizontal-expand;
}

leftcommand
{
	margin: 0px; /* default */
	padding-top: 3px;
	padding-bottom: 0px;
	font-color: #FFF;
	font-style: bold;
	layout: left;
}

rightcommand extends leftcommand
{
	layout: right;
}

.addressInput {
	text-wrap: true;
	margin-left: 4px;
	padding: 4px;
	choicetextfield-choicestyle: .addressChoice;
	choicetextfield-containerstyle: .addressChoicesContainer;
	layout: left | expand;
	border-color: #8699a9;
	background-color: #FFF;
	label-style: textFieldLabel;
}

.addressInput:hover {
	border-color: #0087fa;
	border-width: 2;
	background {
		color: #FFF;
	}
	layout: left | expand;	
}

.addressChoice {
	margin-right:5;
	font-size: small;
	font-style: plain;
	font-color: #000;
	layout: right | expand;
	background-color: #FFF;
}

.addressChoice:hover {
	margin-right:10;
	font-size: medium;
	font-style: plain;
	font-color: red;
	layout: right | expand;
	background-color: #FFF;
}

.addressChoicesContainer {
    margin-left: 30%;
    margin-right: 5px;
	background-color: #FFF;
	border-color: #0087fa;
	layout: left | expand;
}

.dateInput {
	margin-left: 4px;
	padding: 4px;
	font-size: small;
	font-color: fontColor;
	background-color: #FFF;
	border-color: #8699a9;
}

.dateInput:hover {
	border-width: 2;
	border-color: #0087fa;
	background-color: #FFF;
}

